<<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-button type="primary" @click="getDataList">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="excelname" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <el-table-column fixed type="selection" width="55">
      </el-table-column>
      <el-table-column label="任务名称" prop="name">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button-group>
            <el-button size="small" type="info" @click="showEchart(scope.$index, scope.row)">显示图表</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

  </section>
</template>

<style scoped>
  .button-list {
    margin-bottom: 10px;
  }
  .el-button {
    padding: 8px 10px;
  }
  form {
    height: 40px;
  }
</style>

<script>
  import {getExcelList} from '../apis/api'
  export default {
    data () {
      return {
        excelname: [],
        total: 1,
        page: 1
      }
    },
    methods: {
      getDataList () {
        getExcelList().then(res => {
          let data = JSON.parse(res.data)
          this.excelname = data.slice((this.page - 1) * 10, 10 * this.page)
          this.total = data.length
        }, res => {
          this.$message({
            message: '没有数据，请先执行任务获取数据',
            type: 'error'
          })
        })
      },
      selsChange: function (sels) {
        this.sels = sels
      },
      showEchart (index, row) {
        this.$store.dispatch('addTab', {'tab': {
          title: row.name,
          name: '4-1',
          components: '4-1',
          closed: true
        },
          'activeName': '4-1'})
      },
      handleCurrentChange (val) {
        this.page = val
        this.getDataList()
      }
    },
    mounted () {
      this.getDataList()
    }
  }
</script>

